<template>
  <view class="contranband_page">
    <nut-input v-model="keywords" placeholder="请输入您要搜索的物品名称" @update:model-value="changeInput">
      <template #left>
        <Search></Search>
      </template>
    </nut-input>
    <view class="header">
      <view class="left">
        <Tips color="#ff8f1f"></Tips>
        <view class="text" >了解禁运品类别</view>
      </view>
      <view class="right">
        <view class="text1" @click="openPop">查看详情</view>
      </view>
    </view>
    <view class="body" v-if="!isSearch">
      <image class="t1" src="@/assets/images/index/weixianping1.png"></image>
      <image class="t2" src="@/assets/images/index/weixianping2.png"></image>
    </view>
    <view class="body" v-else>
      <view class="resultText" v-html="resultText" v-if="keywordsCount>0"></view>
      <view v-else class="container_empty">
        <image mode="aspectFit" src="../../assets/images/index/empty4.png"></image>
        <view class="empty_text">检索不到相关结果，请咨询工作人员</view>
      </view>
    </view>
  </view>
  <nut-popup :style="{ height: '90%' }" position="bottom" :closeable="true" round v-model:visible="show">
    <view class="pop">
      <view class="title">禁运品类别</view>
      <view class="contant">
        <p>1、国家明令禁运的货物，如武器弹药、仿真枪支、管制刀具类、剧毒药品、历史文物、毒品、烟草、走私香烟类、动植物皮毛类、货币、有价证券、黄金、白银等；</p>
        <p>2、危害国家安全、社会稳定及淫秽的出版物、宣传品、光盘制品等；</p>
        <p>3、有明显危险品标记或危险品文字说明的货物，如易燃易爆、腐蚀性、毒性、强酸碱性和放射性的各种危险品，即包装上有“火把、腐蚀、三叶、三圈、爆炸”等危险品图标的（包括但不限于如汽油、柴油、煤油、油漆、树脂、香蕉水、摩丝、发胶、火药、雷管、爆竹、硫酸、硝酸、苯、甲苯、硅铁、白磷等）</p>
        <p>4、所有气体类化学危险品（包括但不限于如氧化剂、发光剂、过氧化钠、过氧化钾、硝酸铵、过氧化铅、亚硫酸氢钠、压缩气体等）；</p>
        <p>5、无货物性质证明材料，常识和经验无法判断的“三无化工类”（无产品名称、无生产厂名和厂址，无质量合格证，来路不明的产品）；再生塑料桶包装、多次回收的包装塑料桶和铁桶、铁皮很薄易变性的铁桶；</p>
        <p>6、海产品、冻品类：新鲜的肉类、新鲜的水产品类、无专用的蛋品包装的蛋类、速冻食品类；</p>
        <p>7、设备类：旧的设备、设备表面及内部带有油渍的及设备的表面有尖锐菱角的禁止承接；</p>
        <p>8、车辆类：事故车辆、新旧轿车、车头（即驾驶室）、摩托车、电动车（新出厂原包装的摩托车、电动车辆可以承运）；</p>
        <p>9、酒类：发往海南、大连需轮渡运输的，若酒精度大于12°以上，则禁止承运，其他线路暂无限制；</p>
        <p>10、家具类：红木及国家保护植物制成的家具制品（用紫檀木，花梨木、香枝木、黑酸枝、红酸枝、乌木、条纹乌木、鸡翅木、红豆杉等制成的家具）；</p>
        <p style="margin-bottom:72rpx">11、易碎品类：纯玻璃制品（福耀玻璃、灯具除外）、亚克力板（有机玻璃）、含玻璃的家具（玻璃面积超过家具最大面面积30%）、大理石类物品。</p>
      </view>
      <view class="foot">
        <view class="button" @click="sure">我已知晓</view>
      </view>
    </view>
  </nut-popup>
</template>
<script lang="ts" setup>
import contrabandText from './contraband.ts'
import {Search, Tips} from "@nutui/icons-vue-taro";
import { ref } from "vue";
const headerShow = ref<boolean>(true);
const show = ref<boolean>(false);
const keywords = ref<string>('')
const isSearch = ref<boolean>(false)
const resultText = ref<string>('')
const keywordsCount = ref<number>(0)
const changeInput = ()=>{
  keywordsCount.value = 0
  if(keywords.value){
    resultText.value = contrabandText.map((item)=>{
      let strs = item.split(keywords.value)
      keywordsCount.value += (strs.length - 1)
      let str = strs.join(`<text style="color:#fa5151">${keywords.value}</text>`)
      return `<p>${str}</p>`
    }).reduce((a,b)=>{
      return a+b
    })
    isSearch.value = true
  }
  else{
    isSearch.value = false
  }
}
function closeHeader() {
  headerShow.value = false;
}
function openPop() {
  show.value = true;
}
function sure(){
    show.value = false
}

</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.contranband_page {
  width: 100vw;
  //   overflow: auto;
  background: #f5f5f5;
  .header {
    width: 100%;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff9ed;
    padding: 0 24rpx;
    box-sizing: border-box;
    .left {
      display: flex;
      .text {
        font-family: PingFang SC;
        font-size: 24rpx;
        margin-left: 24rpx;
        color: #ff8f1f;
      }
    }
    .right {
      display: flex;
      .text1 {
        font-family: PingFang SC;
        font-size: 24rpx;
        margin-left: 24rpx;
        color: #ff8f1f;
      }
    }
  }
  .body {
    margin-top: 24rpx;
    width: 100%;
    padding: 0 24rpx;
    box-sizing: border-box;
    .t1 {
      width: 702rpx;
      height: 840rpx;
    }
    .t2 {
      width: 702rpx;
      height: 728rpx;
    }
    .resultText {
      background-color: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #666;
      padding: 24rpx 32rpx;
    }
  }
}
.pop {
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0966ff;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    padding: 24rpx;
    box-sizing: border-box;
    height: 916rpx;
    width: 100%;
    overflow: auto;
    background: #f5f5f5;
    overflow: auto;
    p {
      font-family: PingFang SC;
      font-size: 24rpx;
      /* 1级文字 */
      color: #252525;
    }
  }
}
.container_empty {
  width: 80%;
  margin: 220rpx auto;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }
}
</style>
